<template>
    <view class="content">
        <view class="box">
			<image src="../../../static/icon/avatar.png" class="avatar" @click="$screenshot('logo',1,1)"></image>
			<view class="item">
				<image src="../../static/icon/name.png" class="icon"></image>
				<view>昵称</view>
				<input type="nickname" maxlength="16" placeholder="请输入昵称" class="inp">
			</view>
			<view class="item">
				<image src="../../static/icon/tel.png" class="icon"></image>
				<view>手机号</view>
				<view class="tel">13000000001</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: {},
            };
        },
        onLoad(option) {
            var _this =this
            uni.$on('uAvatarCropper', data => {
                _this.$upLoadPic(data.path).then(ret => {
                    // console.log(ret)
                    if (data.fromWhere == "logo"){
                        _this.info.image_uri = ret.data.attach_uri
                    }
                    _this.$ajax('editInfo', {
                        userToken: _this.$getSync('userToken'),
                        image_id: ret.data.id, //头像ID
                        nickname: _this.info.nickname, //昵称
                    }).then(ret => {
                        if (ret.status == 0) {
                            _this.$toast('上传成功')
                            setTimeout(() => {
                                _this.getInfo()
                            }, 300)
                        } else {
                            _this.$toast(ret.message);
                        }
                    });
                });
            })
        },
        onShow() {
            // this.getInfo()
        },
        methods: {
            // 获取个人信息
            getInfo(){
            	this.$ajax('mine_info', {
            		userToken: this.$getSync('userToken'),
                    franchisee_id: this.$getSync('franchiseeId'),//加盟商编号
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.info = ret.data.userInfo
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 150rpx 30rpx 30rpx;
	}
	.box{
		padding: 100rpx 25rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
	}
	.avatar{
		width: 160rpx;
		height: 160rpx;
		border: 8rpx solid #fff;
		border-radius: 50%;
		position: absolute;
		top: -80rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 45rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
		font-size: 30rpx;
		color: #727272;
	}
	.item:last-child{
		border-bottom: none;
	}
	.icon{
		width: 31rpx;
		height: 32rpx;
		margin-right: 14rpx;
	}
	.inp{
		flex: 1;
		color: #000;
		text-align: right;
	}
	.tel{
		flex: 1;
		color: #000;
		text-align: right;
	}
	
	
	

</style>
